<template>
  <div class="top">
    <div class="header">
      <div>
        <img src="../assets/images/2.png" alt="" />
        <button>下载APP</button>
      </div>
    </div>
    <div class="navBar">
      <div>
        <router-link tag="div" active-class="select" to="/recommend"
          >推荐音乐</router-link
        >
      </div>
      <div>
        <router-link tag="div" active-class="select" to="/rank"
          >热歌榜</router-link
        >
      </div>
      <div>
        <router-link tag="div" active-class="select" to="/search"
          >搜索</router-link
        >
      </div>
    </div>
  </div>
</template>

<script>
export default {};
</script>

<style scoped>
.header{
    width: 100%;
    height: 1.68rem;
    background-color: #d43c33;
}
.header div img{
    padding: 2.5px;
}
.header div button{
    margin: 20px;
    float: right;
    height: 36px;
    width: 100px;
    border: 1px solid white;
    border-radius:37.5%/100% ;
    font-size: 16px;
    color: #d43c33;
    background-color: #fff;
    text-align: center;
}
.top{
    width: 100%;
    z-index: 1;
}
.navBar {
  width: 100%;
  height: 40px;
  display: flex;
  border-bottom: 1px solid #cccc;
}
.navBar div {
  flex: 1;
  text-align: center;
  line-height: 40px;
  font-size: 17px;
  color: #333;
}
#content {
  position: relative;
  top: 19vh;
}
.select {
  color: red !important;
}

</style>